<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="tao.ico">
    <base target="_blank">
</head>
<body>
    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix">  
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont up">
                    &#xe601;
                </span>
            </li>
            <li>
                <a href="#" class="login mr7">亲，请登录</a>
                <a href="#">免费注册</a>
            </li>
            <li>
                <a href="#" class="pad">手机逛淘宝</a>
            </li>
        </ul>

        <ul class="fr">
            <li>
                <a href="#" >我的淘宝</a>
                <span class="iconfont up">
                    &#xe601;
                </span>
            </li>
            <li>
                
                <a href="#"><span class="iconfont mr5 c4">&#xe6cf;</span> 购物车</a>
                <span class="iconfont up">&#xe601;</span>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont mr5">&#xe639;</span> 收藏夹</a>
                <span class="iconfont up">&#xe601;</span>
            </li>
            <li>
                <a href="#">商品分类</a>
            </li>
            <li>
                <a href="#">免费开店</a>
            </li>
            <li style="padding:5px;text-align: center; line-height:25px;height: 25px;"> <span class="line">|</span> </li>
            <li>
                <a href="#">千牛卖家中心</a>
                <span class="iconfont up">&#xe601;</span>
            </li>
            <li>
                <a href="#">联系客服</a>
                <span class="iconfont up">&#xe601;</span>
            </li>
            <li>
                
                <a href="#"><span class="iconfont c4 mr5">&#xe626;</span>网站导航</a>
                <span class="iconfont up">&#xe601;</span>
            </li>
        </ul>
    </div>

    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix layer">
            <h1 class="fl">
                <a href="#">
                    <img src="./images/淘宝.png" alt="淘宝网" class="taobao">
                    <!-- <h1>淘宝网</h1> -->
                </a>
            </h1>

            <div class="code fr">
                <span class="c5">去领红包</span>
                <img src="./images/二维码.png" class="ewm">
            </div>

            <div class="search clearfix">
                <div class="left">
                    <span style="font-size: 14px; color: #9c9c9c;">宝贝</span>
                    <span class="iconfont up">&#xeb1f;</span>
                </div>
                <form action="#">
                    <div class="content">
                        <div class="box fl">
                            <input type="text">
                            <div class="placeholder">
                                <i class="iconfont" style="font-size:15px">
                                    &#xe60c;
                                </i>
                                <span>兰若庭</span>
                            </div>
                        </div>
    
                        <div class="btn fl">
                            <button type="submit">
                                搜索
                            </button>
                        </div>

                    </div>
                </form>
            </div>
            
            <div class="hotKey">        
                <a href="#">新款连衣裙</a>
                <a href="#">四件套</a>
                <a href="#" class="c5">潮流T恤</a>
                <a href="#">时尚女鞋</a>
                <a href="#">短裤</a>
                <a href="#">半身裙</a>
                <a href="#">男士外套</a>
                <a href="#">墙纸</a>
                <a href="#">行车记录仪</a>
                <a href="#">新款男鞋</a>
                <a href="#">耳机</a>
                <a href="#">时尚女包</a>
                <a href="#">沙发</a>

            </div>

        </div>
    </div>

    <!-- 首屏内容 -->
    <div id="firstScreen">
        <!-- 导航 -->
        <div id="nav" class="layer clearfix">
             <h2 class="fl">主题市场</h2>
             
            <ul class="fl">
                <li class="size"><a href="#" class="f36">天猫</a></li>
                <li class="size"><a href="#" class="f36">聚划算</a></li>
                <li class="size"><a href="#" class="c90">天猫超市</a></li>
                <li class="line">|</li>
                <li><a href="#">司法拍卖</a></li>
                <li><a href="#">飞猪旅行</a></li>
                <li><a href="#">天天特卖</a></li>
                <li class="line">|</li>
                <li><a href="#">造点新货</a></li>
                <li><a href="#">苏宁易购</a></li>
                <li><a href="#">淘宝心选</a></li>
                <li><a href="#">智能生活</a></li>
            </ul>
        </div>
        
        <!-- 首屏内容 -->
        <div id="firstScreen" class="layer clearfix">
            <!-- 左边内容 -->
            <div class="firstLeft fl"> 

                <!-- 侧边导航 -->
                <div class="sideNav fl">
                    <ul>
                        <li>
                            <a href="#">女装</a>
                        /    <a href="#">内衣</a>
                        /    <a href="#">家居</a><span class="iconfont fr">&#xeb1f;</span>
                        </li>
                        <li><a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">母婴</a> / <a href="#">童装</a> / <a href="#">玩具</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">男装</a> / <a href="#">运动户外</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">美妆</a> / <a href="#">彩妆</a> / <a href="#">个护</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">手机</a> / <a href="#">数码</a> / <a href="#">企业</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">大家电</a> / <a href="#">生活电器</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">零食</a> / <a href="#">生鲜</a> / <a href="#">茶酒</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">厨具</a> / <a href="#">收纳</a> / <a href="#">清洁</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">家纺</a> / <a href="#">家饰</a> / <a href="#">鲜花</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">图书音像</a> / <a href="#">文具</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">医药保健</a> / <a href="#">进口</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">房产</a> / <a href="#">装修家具</a> / <a href="#">建材</a><span class="iconfont fr">&#xeb1f;</span></li>
                        <li><a href="#">手表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a><span class="iconfont fr">&#xeb1f;</span></li>
                    </ul>
                </div>

                <!-- 图片1 容器 -->
                <div class="img1Box fr">
                    <div class="pic fl">
                        <div class="img">
                            <a href="#">
                                <img src="./images/图片1.jpg" >
                            </a>
                        </div>
                        <button class="iconfont leftBtn">&#xe65e;</button>
                        <button class="iconfont rightBtn">&#xe65f;</button>
                        
                        <div class="circle">
                            <span class="active"></span><span></span><span></span><span></span><span></span>
                        </div>

                    </div>
                    <div class="ad fr">
                        <a href="#"><img src="./images/图片1的右侧.webp" alt=""></a>
                    </div>
                </div>

                <!-- 图片2 容器 -->
                <div class="img2Box fr">
                    <div class="pic fl">
                        <div class="picTitle">
                            <div class="text clearfix">
                                <span class="fl bg">理想生活上天猫</span>
                                <span class="fr"><i>1</i>/5</span>
                            </div>
                        </div>

                        <div class="img">
                            <a href="#"><img src="images/picImg1.jpg"></a>
                            <a href="#"><img src="images/picImg2.jpg" alt=""></a>
                        </div>
                        <button class="iconfont leftBtn">&#xe65e;</button>
                        <button class="iconfont rightBtn">&#xe65f;</button>
                        
                    </div>
                    <div class="ad fr">
                        <p class="title">今日热卖</p>
                        <a href="#"><img src="images/adImg1.jpg" alt=""></a>
                    </div>
                </div>

            </div>


            <div class="firstRight fr">
                <!-- 用户 -->
                <div class="user">
                    <a href="#" class="toux">
                        <img src="./images/toux.jpg" alt="">
                    </a>
                    <p class="username">Hi! 你好</p>
                    <p class="members">
                        <a href="#">
                            <!-- <span class="gold"></span> -->
                            领淘金币抵钱
                        </a>
                        <a href="#">
                            <!-- <span class="club"></span> -->
                            会员俱乐部
                        </a>
                    </p>
                    <div class="btn">
                        <button class="login">登录</button>
                        <button class="register">注册</button>
                        <button class="shop">开店</button>
                    </div>
                </div>

                <!-- 分享 -->
                <a href="#" class="share">
                    <img src="./images/分享精彩.jpg" alt="">
                </a>

                <!-- 公告区 -->
                <div class="notice">
                    <ul class="title">
                        <li><a href="#" class="line">公告</a></li>
                        <li><a href="#">规则</a></li>
                        <li><a href="#">安全</a></li>
                        <li><a href="#">公益</a></li>
                        <li><a href="#">千牛</a></li>
                    </ul>
            
                    <ul class="content clearfix">
                        <li class="item"><a href="#">关于全面降低淘宝网卖家收款服务费率的公告</a></li>
                    </ul>
                </div>

                <!-- 图标区域 -->
                <table class="icon">
                    <tr>
                        <td class="item1">
                            <a href="#">
                                <span></span>
                                <i>充话费</i>
                            </a>
                        </td>
                        <td class="item2">
                            <a href="#">
                                <span></span>
                                <i>旅行</i>
                            </a>
                        </td>
                        <td class="item3">
                            <a href="#">
                                <span></span>
                                <i>车险</i>
                            </a>
                        </td>
                        <td class="item4">
                            <a href="#">
                                <span></span>
                                <i>游戏</i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td class="item5">
                            <a href="#">
                                <span></span>
                                <i>彩票</i>
                            </a>
                        </td>
                        <td class="item6">
                            <a href="#">
                                <span></span>
                                <i>电影</i>
                            </a>
                        </td>
                        <td class="item7">
                            <a href="#">
                                <span></span>
                                <i>酒店</i>
                            </a>
                        </td>
                        <td class="item8">
                            <a href="#">
                                <span></span>
                                <i>理财</i>
                            </a>
                        </td>
                    </tr>
                </table>

                <!-- APP -->
                <div class="app">
                    <div class="title clearfix">
                        <h3 class="fl">阿里APP</h3>
                        <a href="#" class="fr">
                            更多 >
                        </a>
                    </div>
                    <ul class="appIcon">
                        <li><a href="#"><img src="./images/app/app1.jpg" alt=""></a></li>
                        <li><a href="#"><img src="./images/app/app2.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/app/app3.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/app/app4.png" alt=""></a></li>
                        <li><a href="#"><img src="./images/app/app5.png" alt=""></a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <!-- 有好货 -->
    <div class="nice-goods">
        <div class="layer">
            <div class="goods">
                <div class="head">
                    <h3>有好货
                        <img src="./images/全民口碑.png" alt="全民口碑">
                    </h3>
                </div>
                <ul class="list">
                    <li>
                        <a href="#">
                            <img src="./images/有好货/图片1.webp" alt="">
                            <h4><a href="#">Pure Cashmere 保暖针织帽</a></h4>
                            <p class="text"><a href="#">这款针织帽风格休闲可爱，...</a></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/有好货/图片2.webp" alt="">
                            <h4><a href="#">二胎家庭都在用这种床</a></h4>
                            <p class="text"><a href="#">软床质量很好很高档，很喜...</a></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/有好货/图片3.webp" alt="">
                            <h4><a href="#">周大福 简约蛇骨链</a></h4>
                            <p class="text"><a href="#">极简风格，雅致大气人人皆...</a></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/有好货/图片4.webp" alt="">
                            <h4><a href="#">only one only 富士山胸针</a></h4>
                            <p class="text"><a href="#">款式精巧，华丽与众不同。</a></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/有好货/图片5.webp" alt="">
                            <h4><a href="#">便携战术防身扇，户外防身</a></h4>
                            <p class="text"><a href="#">钛扇的整体手感舒适，大扇...</a></p>
                        </a>
                    </li>
                </ul>

            </div>

        </div> 
    </div>
    <!-- 右侧固定定位导航 -->
    <div id="tool">
        <span class="iconfont">&#xe605;</span>
        <div class="btn">
            <a href="#" class="c4 active">品质<br>好货</a>
            <a href="#" class="c4">猜你<br>喜欢</a>
            <a href="#" class="item">反馈</a>
            <a href="#">暴恐<br>举报</a>
        </div>
    </div>
    <!-- 新品 -->
    <div class="new">
        <div class="layer">
            <ul class="new-wrapper clearfix">
                <li><a href="#">
                    <img src="./images/新品/新品1.jpg" alt="">
                </a></li>
                <li><a href="#">
                    <img src="./images/新品/新品2.jpg" alt="">
                </a></li>
                <li><a href="#">
                    <img src="./images/新品/新品3.jpg" alt="">
                </a></li>
            </ul>
        </div>
    </div>

</body>
</html>